<template>
  <div class="postersDialogMark opac" v-show="showPosters" ref="postersDialogMark" @click="close">
    <div class="postersDialog" ref="postersDialog" @click.stop>
      <div class="close pointer" @click="close">x</div>
      <!--<div class="posters">
        <div class="poster"><img class="poster1" crossOrigin="anonymous" alt=""></div>
        <div class="poster"><img class="poster2" crossOrigin="anonymous" alt=""></div>
        <div class="poster"><img class="poster3" crossOrigin="anonymous" alt=""></div>
      </div>-->
      <div class="posters">
        <swiper :options = 'swiperOption'>
          <swiper-slide v-for="(item, index) in invite_img" :key="index">
            <div class="poster"><img  class="posterBg" :src="item" alt="."><div class="qrCodeDiv"><img :src="qrCodeImg" alt="."></div></div>
          </swiper-slide>
          <div class="swiper-button-prev swiper-button-white" slot="button-prev" ref="swiperPrev"></div>
          <div class="swiper-button-next swiper-button-white" slot="button-next" ref="swiperNext"></div>
        </swiper>
      </div>
      <div class="desText">
        <p class="desText1">{{$t('myAdd.invitation.saveImg')}}</p>
        <p class="desText2">{{$t('myAdd.invitation.clickMouse1')}}</p>
      </div>
      <canvas id="myCanvas" width="" height="" style="position: absolute; left: -9000px; top: -9000px"></canvas>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'posters',
  props: ['showPosters', 'inviteQECode', 'invite_img'],
  components: { swiper, swiperSlide },
  data () {
    return {
      showTimer: null,
      qrCodeImg: this.inviteQECode,
      swiperOption: {
        slidesPerView: 3,
        observer: true,
        observeParents: true,
        prevButton: '.swiper-button-prev',
        nextButton: '.swiper-button-next'
      }
    }
  },
  watch: {
    'invite_img' (val) {
      /* this.generatePoster('poster', 'myCanvas', this.posterImg0, this.inviteQECode, 'poster1')
      this.generatePoster('poster', 'myCanvas', this.posterImg1, this.inviteQECode, 'poster2')
      this.generatePoster('poster', 'myCanvas', this.posterImg2, this.inviteQECode, 'poster3') */
    },
    'inviteQECode' (val) {
      this.qrCodeImg = val
    },
    'showPosters' (newVal) {
      if (newVal) {
        this.showTimer && clearTimeout(this.showTimer)
        this.showTimer = setTimeout(() => {
          this.$refs.postersDialogMark.classList.remove('opac')
          this.$refs.postersDialog.classList.add('translateY')
        }, 15)
      }
      if (!newVal) {
        this.$refs.postersDialogMark.classList.add('opac')
        this.$refs.postersDialog.classList.remove('translateY')
      }
    }
  },
  mounted () {

  },
  methods: {
    close () {
      this.$emit('closePosterDialog')
    },
    // 合成海报
    generatePoster (className1, canvasId, posterBg, qrCodeImg, showImgClassName) {
      let poster = document.getElementsByClassName(className1)[0]
      let width = poster.offsetWidth
      let height = poster.offsetHeight
      let C = document.getElementById(canvasId)
      C.width = width
      C.height = height
      let ctx = C.getContext('2d')
      let posterImg = new Image()
      posterImg.src = posterBg
      posterImg.setAttribute('crossOrigin', '*')
      let codeImg = new Image()
      codeImg.src = qrCodeImg
      posterImg.onload = function () {
        ctx.drawImage(posterImg, 0, 0, width, height)
        ctx.drawImage(codeImg, 110, 250, 65, 65)
        setTimeout(() => {
          let img = new Image()
          img.src = C.toDataURL('image/png')
          img.setAttribute('crossOrigin', 'Anonymous')
          console.log(document.getElementsByClassName(showImgClassName)[0])
          document.getElementsByClassName(showImgClassName)[0].setAttribute('src', C.toDataURL('image/png'))
        }, 0)
      }
    }
  }
}
</script>
